<template>
  <el-row>
    <el-col :span="8">
      <el-radio-group v-model="modelType" >
        <el-radio-button :label="0">整天</el-radio-button>
        <el-radio-button :label="1">连续几天</el-radio-button>
        <el-radio-button :label="2">时间</el-radio-button>
        <el-radio-button :label="3">时间段</el-radio-button>
      </el-radio-group>
    </el-col>
    <el-col :span="8">
      <el-date-picker
        ref="datePicker"
        popper-class=".hide-year"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        v-model="modelDate"
        :type="pickType"
        :picker-options="{ firstDayOfWeek: 1, shortcuts }"
      />
    </el-col>
    <el-col :span="8">
      <el-time-picker
        v-if="modelType > 1"
        ref="timePicker"
        popper-class=".hide-year"
        format="HH:mm:ss"
        value-format="HH:mm:ss"
        v-model="modelTime"
        :arrow-control="true"
        :is-range="modelType == 3"
      />
    </el-col>
  </el-row>
</template>
<script>
import moment from "moment"; //导入文件
import { validatenull } from '../../../util/validate';
moment.updateLocale("en", {
  longDateFormat : {
    L: "YYYY-MM-DD",
    LTS: "HH:mm:ss",
    LLL: "L LTS",
  },
  week: {
    dow: 1,
    doy: 7,
  },
});
const _modelType = [
  //整天
  {
    pickType: "date",
    pickValueFormat: "yyyy-MM-dd HH:mm:ss",
    shortcuts: [
      {text:"前天",onClick:(vm)=>vm.$emit("pick",moment().subtract(2,"days").format("L")),},
      {text:"昨天",onClick:(vm)=>vm.$emit("pick",moment().subtract(1,"days").format("L")),},
      {text:"今天",onClick:(vm)=>vm.$emit("pick",moment().format("L"))},
    ],
  },
  //连续几天
  {
    pickType: "daterange",
    pickValueFormat: "yyyy-MM-dd HH:mm:ss",
    shortcuts: [
      {text:"前天",onClick:(vm)=>vm.$emit("pick",[moment().subtract(2,"days").startOf("day").format("L"),moment().subtract(2,"days").endOf("day").format("L"),]),},
      {text:"昨天",onClick:(vm)=>vm.$emit("pick",[moment().subtract(1,"days").startOf("day").format("L"),moment().subtract(1,"days").endOf("day").format("L"),]),},
      {text:"今天",onClick:(vm)=>vm.$emit("pick",[moment().startOf("day").format("L"),moment().endOf("day").format("L"),]),},
      {text:"上上周",onClick:(vm)=>vm.$emit("pick",[moment().subtract(2,"weeks").startOf("week").format("L"),moment().subtract(2,"weeks").endOf("week").format("L"),]),},
      {text:"上周",onClick:(vm)=>vm.$emit("pick",[moment().subtract(1,"weeks").startOf("week").format("L"),moment().subtract(1,"weeks").endOf("week").format("L"),]),},
      {text:"上上周-至今",onClick:(vm)=>vm.$emit("pick",[moment().subtract(2,"weeks").startOf("week").format("L"),moment().format("L"),]),},
      {text:"上周-至今",onClick:(vm)=>vm.$emit("pick",[moment().subtract(1,"weeks").startOf("week").format("L"),moment().format("L"),]),},
      {text:"本周-至今",onClick:(vm)=>vm.$emit("pick",[moment().startOf("week").format("L"),moment().format("L"),]),},
    ],
  },
  //时间点
  {
    pickType: "date",
    pickValueFormat: "yyyy-MM-dd HH:mm:ss",
    shortcuts: [
      {text:"前天",onClick:(vm)=>vm.$emit("pick",moment().subtract(2,"days").format("LLL")),},
      {text:"昨天",onClick:(vm)=>vm.$emit("pick",moment().subtract(1,"days").format("LLL")),},
      {text:"今天",onClick:(vm)=>vm.$emit("pick",moment().format("LLL")),},
    ],
  },
  //时间段
  {
    pickType: "daterange",
    pickValueFormat: "yyyy-MM-dd HH:mm:ss",
    shortcuts: [
      {text:"前天",onClick:(vm)=>vm.$emit("pick",[moment().subtract(2,"days").startOf("day").format("LLL"),moment().subtract(2,"days").endOf("day").format("LLL"),]),},
      {text:"昨天",onClick:(vm)=>vm.$emit("pick",[moment().subtract(1,"days").startOf("day").format("LLL"),moment().subtract(1,"days").endOf("day").format("LLL"),]),},
      {text:"今天",onClick:(vm)=>vm.$emit("pick",[moment().startOf("day").format("LLL"),moment().endOf("day").format("LLL"),]),},
    ],
  },
];
export default {
  name: "avue-zp-date",
  model: {
    prop: "model", //指向props的参数名
    event: "input", //事件名称
  },
  data() {
    return {
      model: {
        type: 0,
        date: [moment().format('L')],
        time: [moment().format("LTS")],
      },
    };
  },
  computed: {
    pickValueFormat() {
      return _modelType[this.modelType].pickValueFormat;
    },
    shortcuts() {
      return _modelType[this.modelType].shortcuts;
    },
    pickType() {
      return _modelType[this.modelType].pickType;
    },
    isRange(){
      return this.modelType == 1 || this.modelType ===3
    },
    modelType: {
      get() {
        return this.model.type;
      },
      set(value) {
        this.model.type = value;
        this.model.date = [moment().format('L')],
        this.model.time = [moment().format("LTS")],
        this.$emit("input", this.model);
      },
    },
    modelDate: {
      get() {
          return this.isRange ? this.model.date : this.model.date[0];     
      },
      set(value) {
        this.model.date = value;
        if(this.$refs.timePicker &&  validatenull(this.model.time)){  
          this.model.time =this.model.date.map((d)=>moment().format('LTS'));  
          this.$refs.timePicker.$emit('pick',this.model.time) 
        } 
        console.log(this.model);
        this.$emit("input", this.model);
      },
    },
    modelTime: {
      get() {
        return this.isRange ? this.model.time : this.model.time[0];   
      },
      set(value) {
        this.model.time = value;
        if(this.$refs.datePicker &&  validatenull( this.model.date)){
          this.model.date =this.model.time.map((d)=>moment().format('L'));     
          this.$refs.datePicker.$emit('pick',this.model.date)       
        } 
        console.log(this.model);
        this.$emit("input", this.model);
      },
    },
  },
};
</script>
<style lang="css">
.hide-year
  >>> div.el-picker-panel__body-wrapper
  .el-picker-panel__body
  .el-date-picker__header {
  display: none !important;
}
</style>
